import React from 'react'
import { Layout,Image} from 'antd';
import Table from '../Table'
import Editor from "../Editor"
import "./tr.css"
import {useSelector,useDispatch,connect} from 'react-redux'

const {Content} = Layout;

const Interest = () => {

  const interestList = useSelector(state=> state.interest.interestList)
  const valueList = useSelector(state=> state.value.valueList)
  const dispatch = useDispatch()
  const columns = [
    {
      title: '景点名称',
      key: 'placeName',
      dataIndex: 'placeName',
      valueType: 'text'
    },
    {
      title: '景点图片',
      key: 'placeImg',
      dataIndex: 'placeImg',
      ellipsis:true,
      hideInSearch:true,
      render:(text,record)=>{
        if((record.placeImg).search(';') == -1){
          return(
            <Image.PreviewGroup>
              <Image width={30} height ={30} src={record.placeImg} />
            </Image.PreviewGroup>
          )

        }else{
          return (
            <Image.PreviewGroup>
              {
                (record.placeImg).split(";").map((items, index) =>{
                  return <Image width={30} height ={30} src={items} />

                }
                )
              }
            </Image.PreviewGroup>
            
          )
        }
      }
    },
    {
      title: '开放时间',
      key: 'placeTime',
      dataIndex: 'placeTime',
      valueType: 'text',
      ellipsis:true
    },
    {
      title: '推荐路线',
      key: 'placeRoad',
      dataIndex: 'placeRoad',
      valueType: 'text',
      ellipsis:true
    },
    {
      title: '评论',
      key: 'placeTalk',
      dataIndex: 'placeTalk',
      valueType: 'text',
      ellipsis:true
    },
    {
      title: '景点介绍',
      key: 'placeItro',
      dataIndex: 'placeItro',
      valueType: 'text',
      ellipsis:true
    },
    {
      title: '景点地址',
      key: 'placeAddr',
      dataIndex: 'placeAddr',
      valueType: 'text',
      ellipsis:true
    },
    {
      title: '景点经度',
      key: 'longitude',
      dataIndex: 'longitude',
      valueType: 'text',
      hideInSearch:true,
      ellipsis:true
    },
    {
      title: '景点纬度',
      key: 'latitude',
      dataIndex: 'latitude',
      valueType: 'text',
      hideInSearch:true,
      ellipsis:true
    },

    {
        title: '操作',
        key: 'option',
        width: 120,
        valueType: 'option',
        render: (text,record,index,action) => [<div onClick={()=>{
          dispatch({type:'get',con:record});console.log(valueList)
        }}><Editor ques={interest} url='http://49.233.107.127:2002/city/interest'/></div>
        , <a onClick={async ()=>{
          console.log(record)
          await fetch(`http://49.233.107.127:2002/city/interest/${record.placeID}/${record.cityID}`,{
          method:'delete',
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          }
        })
        dispatch({type:'delete',content:['delete']})
        }}>删除</a>]
      }];

    const right = {
      placeImg:{
        show:false,
        order:2
      },
      placeRoad:{
        show:false,
        order:2
      },
      placeTalk:{
        show:false,
        order:2
      },
      longitude:{
        show:false,
        order:2
      },
      latitude:{
        show:false,
        order:2
      },
      
    }

    const interest = [
      {name:'cityID',label:'城市id',tooltip:'最长为24位',placeholder:'输入城市id'},
      {name:'placeID',label:'景点id',tooltip:'最长为24位',placeholder:'请输入景点id'},
      {name:'placeName',label:'景点名称',tooltip:'最长为24位',placeholder:'输入景点名称'},
      {name:'placeImg',label:'景点图片',placeholder:'上传图片'},
      {name:'placeTime',label:'开放时间',tooltip:'最长为24位',placeholder:'输入开放时间'},
      {name:'placeItro',label:'景点介绍',placeholder:'输入景点介绍'},
      {name:'placeAddr',label:'景点地址',placeholder:'请输入景点地址'},
      {name:'longitude',label:'经度',placeholder:'请输入经度'},
      {name:'latitude',label:'纬度',placeholder:'请输入纬度'}
  ]

    return (
        <Content className="site-layout-background" style={{paddingLeft: 10,margin: 0,minHeight: 280,}}>
          <Table title="景点推荐管理" columns={columns} right={right} url="http://49.233.107.127:2002/city/interest" ques={interest}/>
        </Content>
    )
}

export default connect()(Interest)
